<template>
  <el-container class="body-container">
    <personal-info ref="personalInfo" v-on:username-changed="doGetCurrentUsername"></personal-info>
    <div class="aside-container">
      <div id="asideHeader" class="aside-header">{{ header }}</div>
      <sidebar :isCollapse="isCollapse" :routers="routers"></sidebar>
    </div>
    <el-main class="main">
      <el-header class="main-header" height="56px">
        <el-row>
          <el-col :span="12">
            <svg t="1492500959545" @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024" width="64" height="64" fill="#fff">
              <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
                p-id="1692"></path>
              <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
                p-id="1693"></path>
              <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
                p-id="1694"></path>
            </svg>
          </el-col>
          <el-col :span="12" class="header-function">
            <el-dropdown @command="handleCommand">
              <a class="personal-link">
                <img src="../../assets/images/personal_avatar.png" width="32" alt="点击更换个人信息">
                <span class="username">{{ currentUsername }}</span>
              </a>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="personalInfo">个人信息</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <template v-for="breadcrembItem in breadcrumbItems">
          <template v-if="breadcrembItem.to === ''">
            <el-breadcrumb-item>{{ breadcrembItem.title }}</el-breadcrumb-item>
          </template>
          <template v-else>
            <el-breadcrumb-item :to="{ 'path': breadcrembItem.to }">{{ breadcrembItem.title }}</el-breadcrumb-item>
          </template>
        </template>
      </el-breadcrumb>
      <div class="main-content">
        <transition name="fade" mode="out-in">
					<router-view></router-view>
				</transition>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Sidebar from '@/components/sidebar'
import PersonalInfo from '@/components/user/personalInfo'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      isActive: true,
      isCollapse: false,
      header: 'zhcc view',
      currentUsername: ''
    }
  },
  methods: {
    toggleClick() {
      this.isActive = !this.isActive
      this.isCollapse = !this.isCollapse
      this.header = this.isCollapse ? 'zhcc' : 'zhcc-view'
    },
    handleCommand(command) {
      switch(command) {
        case 'logout':
          sessionStorage.clear()
          this.$router.push('/login')
          // 模拟f5刷新，避免出现Duplicate named routes definition警告。
          this.$router.go(0)
          break
        case 'personalInfo':
          this.$refs.personalInfo.$emit('openPersonalInfoDialog')
      }
    },
    doGetCurrentUsername() {
      this.currentUsername = JSON.parse(sessionStorage.getItem('currentUser')).name
    }
  },
  computed: {
    routers() {
      let items = [];
      let routers = JSON.parse(sessionStorage.getItem('routers'))
      for (let router of routers) {
        let routerProperties = JSON.parse(router.properties)
        let item = {
          id: router.id,
          code: router.code,
          name: router.name,
          url: router.url,
          level: router.level,
          parentId: router.parentId,
          nameFullPath: routerProperties.nameFullPath,
          cssClass: routerProperties.cssClass,
          component: routerProperties.component
        }
        items.push(item)
      }
      return items
    },
    ...mapGetters(['breadcrumbItems'])
  },
  created: function() {

    this.doGetCurrentUsername()
  },
  components: { Sidebar, PersonalInfo }
};


</script>

<!-- 全局样式 -->
<style>
@import '../../assets/css/common.css';
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.body-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  .aside-container {
    height: 100%;
    background-color: #fefefe;
    margin: 0px;
    padding: 0px;
  }
}

.aside-header {
  background-color: #bad7df;
  color: #fefefe;
  font-size: 16pt;
  text-align: center;
  margin: 0px auto;
  padding: 0px;
  line-height: 56px;
  width: 100%;
}

.nav-menu {
  border: none;
}
.nav-menu:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
  overflow: auto;
}

.main {
  margin: 0px;
  padding: 0px;
  width: 100%;
  overflow: hidden;
  .main-header {
    background-color: #bad7df;
    padding-right: 10px;
    .header-function {
      text-align: right;
      line-height: 56px;
      .personal-link {
        padding: 13px 10px 14px;
        text-decoration: none;
      }
      .personal-link:hover {
        background-color:#bac5df;
      }
      img {
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
         border-radius: 50%;
         vertical-align:middle;
      }
      .username {
        margin-left: 3px;
        font-size: 10pt;
        color: #fff;
      }
    }
  }
  .main-content {
    margin: 10px;
    overflow: auto;
  }
  .el-breadcrumb {
    height: 36px;
    line-height: 36px;
    padding-left: 10px;
    border-radius: 0px;
    background-color: #fefefe;
    border-bottom: solid 1px #eee;
  }
}

.hamburger {
  display: inline-block;
  cursor: pointer;
  width: 20px;
  height: 20px;
  transform: rotate(90deg);
  transition: 0.38s;
  transform-origin: 50% 50%;
  margin: 20px 0px 0px -10px;
}
.hamburger.is-active {
  transform: rotate(0deg);
}
</style>
